<template>
  <el-row>
    <el-col :span="24">

      <!-- LOGO图标 -->
      <h1 class="mt-5 mb-5 text-light-100 text-2xl flex justify-center">LOGO图标</h1>

      <!-- menu -->
      <el-menu active-text-color="#ffd04b" background-color="#545c64" default-active="0" class="border-current "
        text-color="#fff" @open="handleOpen" @close="handleClose" router="true">

        <!-- sub-menu-0 -->
        <el-menu-item class="submenu-s" index="0">
          <div class="submenu-icon-s"><el-icon><Histogram /></el-icon></div>
          <span>设备信息</span>
        </el-menu-item>
        <!-- sub-menu-1 -->
        <el-menu-item class="submenu-s" index="1">
          <div class="submenu-icon-s"><el-icon><Histogram /></el-icon></div>
          <span>通道状态</span>
        </el-menu-item>

        <!-- sub-menu-2 -->
        <el-menu-item class="submenu-s" index="2">
          <div class="submenu-icon-s"><el-icon><Microphone /></el-icon></div>
          <span>录音查询</span>
        </el-menu-item>

        <!-- sub-menu-3 -->
        <el-menu-item class="submenu-s" index="3">
          <div class="submenu-icon-s"><el-icon><setting /></el-icon></div>
          <span>系统设置</span>
        </el-menu-item>

        <!-- sub-menu-4 -->
        <el-menu-item class="submenu-s" index="4">
          <div class="submenu-icon-s"><el-icon><Coin /></el-icon></div> 
          <span>Api_test</span>
        </el-menu-item>

        <!-- sub-menu-5 -->
        <el-menu-item class="submenu-s" index="5">
          <div class="submenu-icon-s"><el-icon><User /></el-icon></div>
          <span>用户管理</span>
        </el-menu-item>

        <!-- sub-menu-6 -->
        <el-menu-item class="submenu-s" index="6">
          <div class="submenu-icon-s"><el-icon><Refresh /></el-icon></div>
          <span>重启设备</span>
        </el-menu-item>

      </el-menu>
    </el-col>
  </el-row>
</template>

<script setup>
import {
  Refresh,
  Menu as IconMenu,
  Microphone,
  Histogram,
  Coin,
  Setting,
  User,
} from '@element-plus/icons-vue'

const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}
</script>

<style>
.submenu-s {
  @apply "flex justify-center";
}
.submenu-icon-s {
  @apply "mr-3";
}
</style>